<template>
  <div class="teaching-teacher">
    <p class="title">
      {{ isTarget ? '可见教师' : '任课教师'
      }}<label class="label">{{
        authStore.nowIsSmartRoomCode ? 1 : getTeacherNum || 0
      }}</label>
    </p>
    <ul class="teacher-list">
      <template v-if="isTarget">
        <li class="item">
          <p class="role">创建人</p>
          <p class="name">
            {{ targetInfo?.main_teacher?.teacher_name || '-' }}
          </p>
        </li>
        <li class="item" v-if="getVisibleList">
          <p class="role">可见教师</p>
          <el-tooltip>
            <template #content
              ><span>{{ getVisibleList }}</span></template
            >
            <p class="name">{{ getVisibleList }}</p>
          </el-tooltip>
        </li>
        <li class="item add-item" v-if="isTarget" @click="visible = true">
          <img src="@/assets/images/class-manage/add-icon.svg?url" />
          邀请
        </li>
      </template>
      <template v-else>
        <li class="item" v-if="teachingTeacher?.main_teacher?.name">
          <p class="role">
            {{ authStore.nowIsSmartRoomCode ? '规划师' : '班主任' }}
          </p>
          <el-tooltip>
            <template #content
              ><span>{{ teachingTeacher?.main_teacher?.name }}</span></template
            >
            <p class="name">{{ teachingTeacher?.main_teacher?.name }}</p>
          </el-tooltip>
        </li>
        <template v-if="teachingTeacher?.teachers?.length">
          <li class="item" v-for="item in getTeacherList" :key="item">
            <p class="role">{{ item.subject_name }}</p>
            <el-tooltip>
              <template #content
                ><span>{{ item.teacherList }}</span></template
              >
              <p class="name">{{ item.teacherList }}</p>
            </el-tooltip>
          </li>
        </template>
      </template>
    </ul>
    <invite-dialog
      v-model="visible"
      :classId="route.query.classId"
      :list="targetInfo?.visible_teachers || []"
      @confirm-update="emits('update-target-visible')"
    ></invite-dialog>
  </div>
</template>
<script setup>
import InviteDialog from './InviteDialog.vue'
import { useRoute } from 'vue-router'
import { ref, computed } from 'vue'
import { useAuthStore } from '@/stores'
import _ from 'lodash'

const emits = defineEmits(['update-target-visible'])

const props = defineProps({
  teachingTeacher: {
    type: Object,
    default: () => {}
  },
  targetInfo: {
    type: Object,
    default: () => {}
  }
})

const route = useRoute()
const visible = ref(false)
const authStore = useAuthStore()

const getTeacherList = computed(() => {
  const originList = props?.teachingTeacher?.teachers || []
  const list = _.uniqBy(props?.teachingTeacher?.teachers || [], 'subject_code')
  for (let index = 0; index < list.length; index++) {
    const teachers = originList
      .filter(item => item.subject_code === list[index].subject_code)
      .map(item => item.name)
      .join('/')
    list[index].teacherList = teachers
  }
  return list
})

const getVisibleList = computed(() => {
  return (props.targetInfo?.visible_teachers || [])
    .map(item => item.teacher_name)
    .join('/')
})

const isTarget = computed(() => route.path.indexOf('target') > -1)

const getTeacherNum = computed(() => {
  return isTarget.value
    ? props.targetInfo?.visible_teachers.length
    : _.uniqBy(props.teachingTeacher?.teachers || [], 'person_id').length
})
</script>
<style lang="less" scoped>
.teaching-teacher {
  .title {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    padding-left: 20px;
    color: rgba(4, 11, 26, 0.9);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;

    &::before {
      position: absolute;
      content: '';
      top: 50%;
      transform: translateY(-50%);
      background-color: @color-brand-regular;
      width: 7px;
      height: 21px;
      left: 0;
    }

    .label {
      display: inline-block;
      color: @color-brand-regular;
      background-color: #e9eeff;
      width: 24px;
      height: 24px;
      border-radius: 13px;
      font-size: 12px;
      font-weight: 500;
      line-height: 24px;
      text-align: center;
    }
  }

  .teacher-list {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(9, 1fr);
    justify-content: space-between;
    margin: unset;

    .item {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 155px;
      height: 71px;
      padding: 0 16px;
      border: 1px dashed @color-brand-disabled;
      background-color: @color-neutral-fill-lighter;
      border-radius: 5px;

      .role {
        font-size: 12px;
        color: @color-brand-checked;
        margin-bottom: 10px;
      }

      .name {
        color: rgba(4, 11, 26, 0.8);
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &.add-item {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        color: @color-brand-regular;
        background-color: #fff;
      }
    }
  }
}
</style>
